<template>
  <div class="money_road">
    <div class="jumplabel">
      <img src="../assets/left.png" alt="" @click="$router.go(-1)" />
      <h4>分销代理</h4>
    </div>
    <div class="the_layer"></div>
    <div class="qrcode">
      <!-- <img src="../assets/组 27@2x (3).png" alt="" /> -->
      <div id="code">
        <canvas id="canvas"></canvas>
      </div>
      <img src="../assets/now.png" alt="" @click="onclickFlag" />
      <p>——保存二维码并分享——</p>
    </div>
    <div class="two_box">
      <div class="pink_box">
        <div class="zero">
          <p>
            <i>{{ sum }}</i
            >元
          </p>
          <span>本月收益</span>
        </div>
        <del></del>
        <div class="zero">
          <p>
            <i>{{ renShu }}</i
            >人
          </p>
          <span>新增客户</span>
        </div>
      </div>
      <img
        src="../assets/组 18@2x.png"
        alt=""
        class="jin"
        @click="$router.push('/my_commission')"
      />
    </div>
    <div class="three_box">
      <img src="../assets/rule.png" alt="" class="rule" />
      <div class="qing">
        <span>1</span>
        <p>邀请新用户注册，新老用户各得100积分（积分用于兑换商品）</p>
      </div>
      <div class="qing">
        <span>2</span>
        <p>
          新用户首次下单（金额不限）立减5元，订单完成所绑定老用户立得5元现金，发放至余额中，可用于任意消费于任意消费。
        </p>
      </div>
      <div class="qing">
        <span>3</span>
        <p>
          通过老用户分享的二维码，扫描注册的新用户，直接与老用户自动绑定（不可解绑），老用户可获得所绑定新用户每次消费总金额的2%
        </p>
      </div>
    </div>
    <!-- 蒙层 -->
    <div class="mongolia" v-show="flag" @click="flag = false">
      <canvas id="codebc" width="507px" height="768px"></canvas>
      <img :src="codeSrcbc" alt="" class="codeimg" />
      <div class="stratum" @click.stop>
        <div class="long">
          <img :src="codeSrc" alt="" />
        </div>
        <img src="../assets/组 6@2x.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import QRCode from "qrcode"; //定义生成二维码组件
QRCode;
export default {
  data() {
    return {
      flag: false,
      codeSrc: "../assets/组 27@2x (3).png",
      codeSrcbc: "",
      src: require("../assets/百万靓号“大放送”@2x.png"),
      hbsrc: require("../assets/红包@2x.png"),
      renShu: 0,
      sum: 0,
    };
  },
  // components: {
  //   QRcode: QRCode, //注册组件
  // },
  methods: {
    onclickFlag() {
      document.getElementById("login").style.display = "flex";
      setTimeout(() => {
        this.flag = true;
        document.getElementById("login").style.display = "none";
      }, 2000);
    },
    getUrl(xxx) {
      var canvas = document.getElementById("canvas"); //获取到canvas
      var code = document.getElementById("code"); //获取到code容器
      QRCode.toCanvas(canvas, xxx, (error) => {
        if (error) console.error(error);
        console.log("success!");
      });
      var image = new Image(); //实例一个img
      image.src = canvas.toDataURL("image/png"); //转换成base64格式路径的png图片
      image.style.width = "100%"; //设置样式
      // image.style = "border-radius: 50%;";
      code.appendChild(image); //添加到code 容器中
      this.codeSrc = image.src;
      canvas.style.display = "none"; //隐藏掉canvas
      this.getcodebc();
    },
    getcodebc() {
      var canvas1 = document.getElementById("codebc"); //获取到canvas
      var ctx = canvas1.getContext("2d");
      var image = new Image();
      image.onload = function () {
        ctx.drawImage(image, 0, 0, 507, 768, 0, 0, 507, 768);
      };
      image.src = this.src;
      setTimeout(() => {
        ctx.beginPath();
        ctx.save();
        ctx.rect(100, 200, 300, 350);
        ctx.clip();
        ctx.strokeStyle = "rgba(0,0,0,0)";
        ctx.stroke();
        var image1 = new Image();
        image1.onload = function () {
          ctx.drawImage(image1, 100, 200, 300, 350);
          ctx.restore();
        };
        image1.src = this.hbsrc;
        this.codeSrcbc = this.codeSrc;
      }, 1000);
      setTimeout(() => {
        ctx.beginPath();
        ctx.save();
        ctx.rect(160, 212, 180, 180);
        ctx.clip();
        ctx.stroke();
        var image1 = new Image();
        image1.onload = function () {
          ctx.drawImage(image1, 160, 212, 180, 180);
          ctx.restore();
        };
        image1.src = this.codeSrc;
        this.codeSrcbc = this.codeSrc;
      }, 2000);
      setTimeout(() => {
        this.codeSrcbc = canvas1.toDataURL("image/png");
      }, 3000);
    },
  },
  mounted() {
    var xxx = "http://www.haoshuzhi.com?pid=" + localStorage.getItem("user-id");
    this.getUrl(xxx);

    this.$post("/api/home_page/commissionslevel", {
      user_id: localStorage.getItem("user-id"),
    }).then((r) => {
      this.renShu = r.data.data.length;
    });

    this.$get("/api/balance_log/balance", {
      user_id: localStorage.getItem("user-id"),
    }).then((r) => {
      if (r.data.balance != null) {
        this.sum = r.data.balance;
      }
    });
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/base.less";
img {
  pointer-events: auto;
}
#codebc {
  display: none;
  // position: relative;
  // z-index: 9999999;
}
#code {
  width: 116 / @vw;
  height: 113 / @vw;
  margin-top: 15 / @vw;
}
.codeimg {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9998;
  opacity: 0;
}
.money_road {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: #fd2352;
  background-size: 100% 100%;
  padding-top: 64 / @vw;
  box-sizing: border-box;
  overflow: auto;
}
.money_road .jumplabel {
  width: 100%;
  height: 58 / @vw;
  background-color: #ea5656;
  display: flex;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}
.money_road .jumplabel img {
  width: 10 / @vw;
  height: 16 / @vw;
  margin-left: 15 / @vw;
}
.money_road .jumplabel h4 {
  font-size: 16 / @vw;
  margin: 0 auto;
  color: #fff;
  font-weight: 500;
}
.money_road .the_layer {
  width: 100%;
  height: 454 / @vw;
  background: url("../assets/图层 0@2x.png") no-repeat;
  background-size: 100% 454 / @vw;
}
.money_road .qrcode {
  width: 330 / @vw;
  height: 195 / @vw;
  background: url("../assets/组 27@2x.png") no-repeat;
  background-size: 330 / @vw 195 / @vw;
  margin: -118 / @vw auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.money_road .qrcode img:first-child {
  width: 116 / @vw;
  height: 113 / @vw;
  margin-top: 8 / @vw;
}
.money_road .qrcode img {
  width: 137 / @vw;
  height: 27 / @vw;
}
.money_road .qrcode p {
  font-size: 12 / @vw;
  color: #999999;
  margin-top: 8 / @vw;
}
.money_road .two_box {
  width: 330 / @vw;
  height: 166 / @vw;
  margin: 10 / @vw auto;
  background: url("../assets/组 27@2x (1).png") no-repeat;
  background-size: 330 / @vw 166 / @vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.money_road .two_box .pink_box {
  width: 195 / @vw;
  height: 73 / @vw;
  background: url("../assets/pink.png") no-repeat;
  background-size: 195 / @vw 73 / @vw;
  margin-top: 27 / @vw;
  display: flex;
}
.money_road .two_box .pink_box .zero {
  width: 49%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.money_road .two_box .pink_box del {
  width: 1 / @vw;
  height: 50 / @vw;
  background-color: #fa95d3;
  margin-top: 10 / @vw;
}
.money_road .two_box .pink_box .zero p {
  font-size: 16 / @vw;
  color: #ea5656;
  margin-top: 6 / @vw;
}
.money_road .two_box .pink_box .zero p i {
  font-size: 30 / @vw;
}
.money_road .two_box .pink_box .zero span {
  font-size: 12 / @vw;
  color: #666666;
}
.money_road .two_box .jin {
  width: 137 / @vw;
  height: 27 / @vw;
  margin-top: 13 / @vw;
}
.money_road .three_box {
  width: 330 / @vw;
  height: 233 / @vw;
  background: url("../assets/组 27@2x (2).png") no-repeat;
  background-size: 330 / @vw 233 / @vw;
  margin: 0 auto 20 / @vw;
  display: flex;
  flex-direction: column;
}
.money_road .three_box .qing {
  align-items: flex-start;
  display: flex;
  padding: 10 / @vw 0 0 31 / @vw;
}
.money_road .three_box .qing:first-child {
  padding: 60 / @vw 0 0 31 / @vw;
}
.money_road .three_box .qing p {
  font-size: 12 / @vw;
  color: #666666;
  margin-right: 30 / @vw;
}
.money_road .three_box .qing span {
  color: #ea5656;
  font-weight: 600;
  margin-right: 10 / @vw;
}
.money_road .three_box .rule {
  width: 113 / @vw;
  height: 16 / @vw;
  margin: 30 / @vw auto 0;
}
.money_road .mongolia {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
}
.money_road .mongolia .stratum {
  position: absolute;
  z-index: 44;
  width: 254 / @vw;
  height: 384 / @vw;
  background: url("../assets/百万靓号“大放送”@2x.png") no-repeat;
  background-size: 254 / @vw 384 / @vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // margin: 0 auto;
}
.money_road .mongolia .stratum img {
  width: 177 / @vw;
  height: 40 / @vw;
  margin-top: 30 / @vw;
}
.money_road .mongolia .stratum .long {
  width: 152 / @vw;
  height: 180 / @vw;
  background: url("../assets/红包@2x.png") no-repeat;
  background-size: 152 / @vw 180 / @vw;
  display: flex;
  justify-content: center;
  margin-top: 60 / @vw;
}
.money_road .mongolia .stratum .long img {
  width: 93 / @vw;
  height: 91 / @vw;
  margin-top: 10 / @vw;
}
</style>